<template>
    <div class="detail-desInfo">
        <ul class="tabs">
            <li class="tab-item" :class="tabFlag?'avtive':''" @click="tabFlag = true">礼品详情</li>
            <li class="tab-item" :class="!tabFlag?'avtive':''" @click="tabFlag = false">常见问题</li>
        </ul>

        <!-- 图片介绍 -->
        <div v-show="tabFlag" v-html="description" style="padding-top: 20px;"></div>

        <!-- 常见问题 -->
        <div class="issue" v-show="!tabFlag">
            <h4>兑换后运费如何收取？</h4>
            <p>
                商城内大部分实物产品均可包邮，也支持上门自提。虚拟产品则无需运费，可在兑换后直接使用。
            </p>
            <p class="mb20">
                （注：新疆，西藏，内蒙古，青海，海南，宁夏暂不支持包邮，在此地区兑换商品需提前与客服确认运费。）
            </p>
            <h4>如何申请退换货？</h4>
            <p>所有产品均为鸡腿兑换礼品，无质量问题不支持退换货；</p>
            <p>如因喜好不同，或到货后后悔等原因，不支持退货；</p>
            <p>因客户原因如联系方式有误、电话停机、不接电话、无理由拒收等造成快件无法正常签收的情况，叩丁狼均不进行补发或赔付；</p>
            <p>如因质量问题需要退货，将由客服人员与客户联系，确认邮寄地址与流程。退回物品不得有人为损坏或使用痕迹，否则拒绝退换；</p>
            <p class="mb20">如顾客选择自行寄回商品，请先垫付运费，到货验证商品后，叩丁狼将以鸡腿发放形式为用户报销运费，不接受单方面到付件。</p>
            <h4>如何开具发票？</h4>
            <p>叩丁狼积分商城产品均为定制礼品，使用积分兑换的产品均不支持开票。</p>
            <h4>关于鸡腿价格问题</h4>
            <p class="mb20">因可能存在系统缓存、页面更新延迟等不确定性情况，导致价格显示异常，商品具体售价请以订单结算页价格为准。如您发现异常情况出现，请立即联系我们补正，以便您能顺兑换。</p>
            <h4>联系我们</h4>
            <p>www.wolfcode.cn</p>
            <p class="mb20">微信公众号搜索“叩丁狼”</p>
        </div>

    </div>
</template>

<script>
    export default {
        props: ['description'],
        data() {
            return {
                tabFlag: true
            }
        },
    }
</script>

<style scoped lang="less">
    .detail-desInfo {
        
        .tabs {
            display: flex;

            li {
                width: 120px;
                height: 50px;
                font-size: 18px;
                font-family: SourceHanSansSC;
                font-weight: 300;
                line-height: 50px;
                text-align: center;
                color: #999999;
                cursor: pointer;
            }

            .avtive {
                font-weight: bold;
                color: #333333;
                background: #ECECEC;
            }
        }

        .issue {
            padding-bottom: 40px;

            h4 {
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 10px;
                margin-top: 20px;
            }

            p {
                line-height: 1.4em;
            }
        }


    }
</style>